<script>
import { getLangCount } from '@/api/base.js';

export default {
    render: function (createElement) {
        return createElement("div", {
            attrs: {
                id: "LanguageCharts",
            },
            style: {
                height: "100%"
            }
        });
    },
    data() {
        return {
            countList: [],
            langList: [],
        }
    },
    methods: {
        async initEchart() {
            var chartDom = document.getElementById('LanguageCharts');
            var myChart = echarts.init(chartDom);

            // 请求后端接口
            getLangCount().then(res => {
                this.countList = res.CountList
                this.langList = res.LangList

                var option = {
                    title: {
                        text: '不同编程语言的岗位数量',
                        textStyle: {
                            color: '#fff'
                        },
                    },
                    textStyle: {
                        color: '#fff'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.05]
                    },
                    yAxis: {
                        type: 'category',
                        data: this.langList
                    },
                    series: [
                        {
                            name: '2011',
                            type: 'bar',
                            data: this.countList,
                            itemStyle: {
                                normal: {
                                    //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                                    barBorderRadius: [0, 100, 100, 0]
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            })
        }
    },
    mounted() {
        this.initEchart();
        // this.getLangCount()
    }
};
</script>